<template>
  <div>
    <div class="weui-cells__title">试卷列表</div>
    <div class="weui-cells weui-cells_after-title " v-for="(item, index) in radioItems" :key="index">
      <div class="weui-cell" @click="toProblemsList(item)">
          <icon @click.stop="radioChange(index)" class="weui-icon-checkbox_circle" type="circle" size="30"
                v-if="selectedIndex !== index"></icon>
          <icon @click.stop="radioChange(index)" class="weui-icon-checkbox_success" type="success" size="30"
                v-if="selectedIndex === index"></icon>
        <div class="weui-cell__bd" >{{item.title}}</div>
        <div class="weui-cell__ft weui-cell__ft_in-access"></div>
      </div>
    </div>
    <mp-modal ref="mpModal" :title="'提醒'" :content="'确认是否修改当前关卡的试卷'" :showCancel="true"
              @confirm="confirmChange"></mp-modal>
    <div class="mybtn">
      <mp-button type="primary" size="large" btnClass="mb15" @click="showModal">修改试卷</mp-button>
    </div>
    <mp-toast :type="toastType" v-model="showToast" :content="content" :duration="duration"></mp-toast>
    <mp-toast :type="successType" v-model="showSuccessToast" :content="successType" :duration="duration"></mp-toast>
  </div>

</template>

<script>
  import mpButton from 'mpvue-weui/src/button'
  import mpModal from 'mpvue-weui/src/modal'
  import { queryPapersByTags } from '../../util/api'
  import mpToast from 'mpvue-weui/src/toast'
  export default {
    components: {
      mpModal,
      mpButton,
      mpToast
    },
    data: function () {
      return {
        radioItems: [],
        selectedIndex: -1,
        toastType: 'error',
        content: '请先选择试卷',
        showToast: false,
        duration: 1000,
        successType: 'success',
        successContent: '修改关卡成功',
        showSuccessToast: false
      }
    },
    methods: {
      radioChange (index) {
        console.log('radio 携带的值为：' + index)
        this.selectedIndex = index
      },
      showModal () {
        if (this.selectedIndex !== -1) {
          this.$refs.mpModal.show()
        } else {
          this.showToast = true
        }
      },
      confirmChange () {
        // 通过年级科目，关卡号，试卷id修改
        this.$fly.put(this.$store.state.URL + '/studygo/gateway/changeGateway', {
          // 通过年级，科目，关卡号删除关卡
          id: this.$store.state.roundSelectedDate.id,
          paperId: this.radioItems[this.selectedIndex].paperId.toString()
        })
          .then(response => {
            this.showSuccessToast = true
            wx.navigateBack({
              delta: 1
            })
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      toProblemsList (item) {
        this.$store.state.paperIdInProblemsList = item.paperId
        wx.navigateTo({
          url: '../problems-list/main'
        })
      }
    },
    beforeMount () {
      // queryPapersByTags([this.$store.state.managerGrade], false)
      queryPapersByTags([this.$store.state.managerSubject, this.$store.state.managerGrade], false)
        .then(response => {
          console.log(response.data)
          this.radioItems = response.data.results
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
</script>

<style scoped>
  .mybtn {
    position: absolute;
    bottom: 0 rpx;
    margin-left: 5 rpx;
    width: 100%;
  }
</style>
